<template>
    <div class="projectBox" v-loading="loading"
    style="height:100%;background:white;">
    <ul class="project-list project-list--text">
        <template v-if="projectList.length!=0">
        
        <li tabindex="0" class="project-list__item " v-for="(item,index) in projectList"  @dblclick="handleJump(item.projectId,item.projectName)" :key="index">
            <p class="project-list__item-name" :class="[index === current? 'a-focus':'']" @click="handleOpen(index,item,$event)" >{{item.projectName}}</p>
            <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            :class="[index === current ? 'delBtn active' : 'delBtn']"
            @click="handleDelete(item.projectId)"></el-button>
            <el-button
            size="mini"
            type="text"
            icon="el-icon-s-help"
            :class="[index === current ? 'delBtn active' : 'delBtn']"
            @click="handleJump(item.projectId,item.projectName)"></el-button>
        </li>
        </template>
    </ul>
</div>
</template>

<script>
import { listProject,delProject } from "@/api/project/project";
export default {
    name:"projectList",
    props: {
        projectList: {
            type: Array
        },
        projectType:{
            type:Number
        }
    },
    data() {
        return{
            //选中标记
            current:0,
            // 遮罩层
            loading: false,
            //请求参数
            queryParams:this.projectType,
            dataList:{},
        }
        
    },
    methods: {
        // 跳转查看工程数据
        handleJump(projectId,proName){
            console.log(this.$router)
            debugger
            this.$router.push({ path: "/data/data",query:{projectName:proName,projectId:projectId},replace: true});
            // this.$router.push({ name:'Data/:ID',params:{ID:projectId},query:{projectName:proName} });
            
        },
        //点击事件
        handleOpen(index,project, event) {
            this.current = index;
            this.$emit('listenProject', project);
        },
        /** 删除按钮操作 */
        handleDelete(projectId) {
            if(!this.$store.getters.permissions.includes("*:*:*")&&!this.$store.getters.permissions.includes('project:project:delete')){
                this.Message({
                    message:"无权限!",
                    type:'error'
                })
                return;
            }
            this.$confirm(`是否确认删除此项目数据项?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then( ()=>{
                delProject(projectId).then(() => {
                this.msgSuccess("删除成功");
                this.$emit('on-return-data', this.queryParams);
            })
            }).catch(() => { })
        },
        //获取项目数据
        getList() {
            this.loading = true;
            // console.log(this.queryParams);
            listProject(this.queryParams).then(
                response => {
                    this.dataList = response.data;
                    this.$emit('listenProject',this.projectList[this.current]);
                    this.loading = false;
                }
            );
        },
    },
    watch:{
       projectList(val){
           this.$emit('listenProject', val[this.current]);
       } ,
    //    dataList(val){
    //        this.$emit('on-return-data', val);
    //    }
    }
}
</script>
<style scoped lang="scss">

.project{
    font-size: 14px;
}
.projectBox{
    max-height: 340px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 340px;
    padding: 0 10px;
}
.projectBox::-webkit-scrollbar {
        display: none;
    }
.project-list {
    margin: 0px 0px 20px 0px;
    padding: 0;
    list-style: none;
}
.project-list__item:hover{
    background-color: #F5F7FA;
    outline: none;
    color:$main-color;
    cursor: pointer;
}
.project-list__item:focus{
     outline: none;
}
.project-list__item:first-child {
    margin-top: 10px;
}
.project-list__item {
    transition: all .5s cubic-bezier(.55,0,.1,1);
    font-size: 14px;
    color: #606266;
    line-height: 1.8;
    margin-top: 5px;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
}
.project-list__item-name {
    color: #606266;
    display:inline-block;
    margin-right: 10px;
    width: 80%;
    padding-left: 4px;
    margin: 0px !important;
    transition: color .3s;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.project-list__item a:focus,.project-list__item a:hover{
    color: $main-color;
    cursor: pointer;
}
.a-focus{
    color: $main-color;
}
.delBtn{
    color: #606266;
    float: right;
    display: none;
    transition: display 1s linear;
    margin-left: 5px;
}
.delBtn:hover{
    color: #EA353C;
}
.delBtn.active{
    display: block;
}
</style>>
